<template>
  <div class="container page">

  <p v-if="empty" style="text-align:center;margin-top:350rpx;">购物车里什么都没有，请去添加喜欢的商品</p>


<div :key="product" v-for="product of productList">
	<div class="one">
        <ul class="xzp1" >
            <p class="p" @click="selectList(index)" v-if="product.checked === 0"><img src="http://www.hatchdo.com/wxmini/cart/uncheck.png" class="xz" /></p>
            <p class="p" @click="selectList(index)" v-else><img src="http://www.hatchdo.com/wxmini/cart/check.png" class="xz" /></p>
        </ul>
        <ul class="p2" @click="productChoose(product.product_id)"><img :src="product.main_image" class="spt" /></ul>
        <ul class="js" @click="productChoose(product.product_id)">
            <!-- <p class="fontVVU" >&nbsp</p> -->
            <p class="fontPP" style="font-size:30rpx;">{{product.name}}</p>
            <p class="fontXQ" style="font-size:20rpx;">{{product.subtitle}}</p>
            <!-- <p class="fontXQ" style="font-size:20rpx;">库存:{{product.stock}}个</p> -->
            <!-- <p class="fontXQ" style="font-size:30rpx;">¥{{product.price}}</p> -->
        </ul>
        <ul class="p1" @click="deletepro(product.id)"><p class="fontSC">DELETE<br>删除</p></ul>
    </div>
    <div class="two">
        <ul class="one">
            <p class="p4"></p>
            <p class="jg">￥{{product.price}}</p>
            <p class="sl"  @click="down(index,product.id)"><span> - </span></p>
            <input class="zt" type="number" placeholder="数量" @blur="eventhandle(index,product.id)" v-model="product.quantity">
            <p class="slz" @click="up(index,product.id)"><span> + </span></p>
        </ul>
    </div>
</div>

<div style="height:150rpx;"></div>

<!-- <checkbox-group @change="checkgroup">
  <div class="cartList" :key="product" v-for="product of productList">
    <div class="topcart">

      <img @click="selectList(index)" v-if="product.checked === 0" style="height:50rpx;width:50rpx;margin-top:25rpx;" src="http://www.hatchdo.com/wxmini/cart/uncheck.png">
      <img @click="selectList(index)" v-else style="height:50rpx;width:50rpx;margin-top:25rpx;" src="http://www.hatchdo.com/wxmini/cart/check.png">
      
      <div style="text-align: right;color:#f17070">删除</div>
    </div>

    <div class="midcart" @click="productChoose(product.product_id)">
      <div>
        <img :src="product.main_image">
      </div>
      <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:5">
        <p>{{product.name}}</p>
        <p>{{product.subtitle}}</p>
        </div>
    </div>

    <div class="midcart">
      <div>
        库存:{{product.stock}}个
      </div>
      <div style="text-align: right;color: #44CFDC;">
        ¥{{product.price}}
      </div>
    </div>

    <form>
      <div class="num">
      <button type="default" @click="down(index,product.id)"> - </button>
        <input style="height: 100rpx;line-height:100rpx;" type="number" placeholder="请输入数量" @blur="eventhandle(index,product.id)" v-model="product.quantity">
      <button type="default" @click="up(index,product.id)"> + </button>
      </div> 
    </form>

    <div>&nbsp</div>

  </div>
</checkbox-group> -->

  <div class="order" v-if="isLogin" style="font-size: 25rpx;">
      <img @click="chooseAll()" v-if="!selectAllStatus" style="height:50rpx;width:50rpx;margin-top:15rpx;margin-left:25rpx;" src="http://www.hatchdo.com/wxmini/cart/uncheck.png">
      <img @click="chooseAll()" v-else style="height:50rpx;width:50rpx;margin-top:15rpx;margin-left:25rpx;" src="http://www.hatchdo.com/wxmini/cart/check.png">
    <div>总价:￥{{total}}</div>
    <div style="color:#fff;background-color:#000;height: 80rpx;line-height: 80rpx;" @click="ordercreate(cartList)"> 去结算 </div>   
  </div>

  </div>
</template>
<script>
// var WXBizDataCrypt = require('@/tools/WXBizDataCrypt')
import {showSuccess, showModal} from '@/util'
import {get, post, getAuth, postAuth} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
  },
  data () {
    return {
      empty: false,
      isLogin: false,
      selectAllStatus: false,
      checkedall: 0,
      tabA: 0,
      form: {"num":1},
      total: 0,
      cartList: [],
      productList: [],
      focus: true,
      inputValue: ''
    }
  },
  mounted () {
    this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `为女性恢复年轻及孩子健康成长提供一站式解决方案。`,
      // imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/hcdindex/main?shareuser=${wx.getStorageSync('user').id}`
    }
  },
  methods: {
    deletepro(productid) {
        getAuth(`geweb/cart/delete?productid=${productid}&userid=${JSON.parse(wx.getStorageSync('user').id)}`, {}, {})
          .then(result => {

            this.empty = false
            this.isLogin = false
            this.lslogin()
            wx.showLoading();
            this.productList = []
            this.get_cartList()

            this.getTotalPrice();
            this.selectAllStatus = false
            wx.hideLoading();
            
        }) 
    },
    lslogin(){
      post(`geweb/user/checkuser`, {}, {"token":wx.getStorageSync('token'),"userId":wx.getStorageSync('user').id})
      .then(result => {
      if(result.result === 'success') {
      // console.log(this.isLogin)   

      this.isLogin = true
      return
      }
          wx.showToast({
            title: '请登录',
            icon: 'none'
          })
      setTimeout(() => {
            wx.switchTab({
              url: `/pages/usercenter/main`
            })
      }, 1000)

      })
    },
    getTotalPrice(){
        let carts = this.productList;               
        let total = 0;
        for(let i = 0; i<carts.length; i++) {         
            if(carts[i].checked) {                   
                total += carts[i].quantity * carts[i].price;    
            }
        }
        this.total = total
    },
    // 单选
    selectList(e){
        this.selectAllStatus = false
        const index = e
        let carts = this.productList;
        const checked = carts[index].checked;         
        if (carts[index].checked === 0) {
            carts[index].checked = 1;              
        } else {
            carts[index].checked = 0;              
        }

        this.getTotalPrice();
    },
    // 全选
    chooseAll() {
            let selectAllStatus = this.selectAllStatus;    
            this.selectAllStatus = !selectAllStatus;
            let carts = this.productList;

            for (let i = 0; i < carts.length; i++) {
                if(selectAllStatus) {
                    carts[i].checked = 0;            
                } else {
                    carts[i].checked = 1;            
                }
            }

            this.getTotalPrice();   
    },
    eventhandle(index,productid){
        let carts = this.productList;
        let quantity = carts[index].quantity;
        if(quantity <= 1){
            this.productList[index].quantity = 1
            quantity = 1
            this.getTotalPrice();
            getAuth(`geweb/cart/modifycartquantity?count=${quantity}&productid=${productid}&userid=${JSON.parse(wx.getStorageSync('user').id)}`, {}, {})
                .then(result => {
            })
            return false;
        }
        this.getTotalPrice();
        // console.log(x)

        getAuth(`geweb/cart/modifycartquantity?count=${quantity}&productid=${productid}&userid=${JSON.parse(wx.getStorageSync('user').id)}`, {}, {})
          .then(result => {

            // this.get_cartList()
        // console.log(index)

        })
        

    },
    // 删除
    deleteList(e) {
        const index = e.currentTarget.dataset.index;
        let carts = this.data.carts;
        carts.splice(index,1);              
        this.setData({
            carts: carts
        });
        if(!carts.length){                 
            this.setData({
                hasList: false              
            });
        }else{                              
            this.getTotalPrice();           
        }   
    },
    async get_cartList() {
      return await getAuth(`geweb/cart/get_cartlist?userid=${JSON.parse(wx.getStorageSync('user').id)}`, {}, {}).then(result => {

        // if(result.code === 301) {
        //   wx.switchTab({
        //     url: `/pages/usercenter/main`
        //   })
        //   wx.showToast({
        //     title: '请登录',
        //     icon: 'none'
        //   })
        // }

        if(result.code === 200) {
            console.log(result.res)
            this.productList = result.res;

            if(!this.productList[0]){
              this.empty = true
            }

        }


        // this.total = 0
        // for (let res of result.res) {
        //   res.quantity * res.price
        //   this.total+=res.quantity * res.price
        // }
        //   console.log(this.total)

      })
    },
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    up(index,productid) {

            let carts = this.productList;
            let quantity = carts[index].quantity;
            quantity = quantity + 1;
            carts[index].quantity = quantity;

            this.getTotalPrice();

        getAuth(`geweb/cart/modifycartquantity?count=${quantity}&productid=${productid}&userid=${JSON.parse(wx.getStorageSync('user').id)}`, {}, {})
          .then(result => {

            // this.get_cartList()
            // this.getTotalPrice();
        })

    },
    down(index,productid) {

            let carts = this.productList;
            let quantity = carts[index].quantity;
            if(quantity <= 1){
                return false;
            }
            quantity = quantity - 1;
            carts[index].quantity = quantity;

            this.getTotalPrice();

        if(quantity>0) {
        getAuth(`geweb/cart/modifycartquantity?count=${quantity}&productid=${productid}&userid=${JSON.parse(wx.getStorageSync('user').id)}`, {}, {})
          .then(result => {

            // this.get_cartList()
            // this.getTotalPrice();
        })
        }
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
// 去结算
    ordercreate() {
          console.log('productList',this.productList)

            let carts = this.productList;                  
            this.cartList = []
            for(let i = 0; i<carts.length; i++) {         
                if(carts[i].checked !== 0) {                   

                    this.cartList.push(this.productList[i])

                }

            }
            console.log("12212" ,this.cartList)

            if(!this.cartList[0]) {
              wx.showToast({
                title: '请选择商品',
                icon: 'none'
              })
              return
            }

          // console.log(JSON.stringify(this.cartList))

          // console.log(encodeURIComponent(JSON.stringify(this.cartList)))

          // console.log(decodeURIComponent(encodeURIComponent(JSON.stringify(this.cartList))))
          // console.log(JSON.parse(decodeURIComponent(encodeURIComponent(JSON.stringify(this.cartList)))))

          if(this.cartList[0]) {
            console.log("333333333" ,this.cartList)

            wx.navigateTo({
              url: `/pages/ordercreate/main?orderlist=${encodeURIComponent(JSON.stringify(this.cartList))}`
            })
          }

    },
    async joke() {
      return await get2('api/jokes', {})
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    }

  },
  onShow () {
    Object.assign(this.$data, this.$options.data())
    this.empty = false
    this.isLogin = false
    this.lslogin()
    // wx.showLoading();
    // this.productList = []
    this.get_cartList()

    this.getTotalPrice();
    this.selectAllStatus = false
    // wx.hideLoading();

    // this.total = 0
    
      // .then(result => {

      //   if(result.code === 301) {
      //     // console.log("去登陆")
      //     wx.showToast({
      //       title: '请登陆',
      //       icon: 'none'
      //     })
      //   }

      //   if(result.code === 200) {
          
      //   }
        
      // })

    // getAuth(`geweb/shop/user/lslogin`, {}, {})
    // .then(result => {
    //   console.log(result.code)
    //   if(result.code === 200) {
    //      this.get_cartList()
    //   } else {
    //     console.log("去注册")
    //   }
    // })

  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 25rpx;
  margin-top: 25rpx;  
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.choose {
  color: #44CFDC;
}
.order {
  z-index: 999;
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  background-color: #ffffff;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  text-align: center;
    div {
      flex: 1;
    }
}
.order2 {
  z-index: 999;
    position: fixed; 
  bottom: 0; 
  width: 100%; 
  background-color: #ffffff;
  height: 100rpx;
  line-height: 100rpx;
}
.cartList {
  margin: 50rpx 25rpx;
  padding: 0 25rpx;
  border: 1px solid #ddd;
  // text-align: center;
  img {
    height: 100rpx;
    width: 100rpx;
  }
  .midcart {
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    div {
      flex: 1;
    }
  }
  .topcart {
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    div {
      flex: 1;
    }
  }
}
.productList {
  margin: 0 25rpx;
  margin-top: 50rpx;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  text-align: center;
  div {
    flex: 1;
      img{
        width: 180rpx;
        height:180rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
  }
  .des{
    width: 400rpx;
    flex: 3;
    height: 200rpx;
    margin: 10rpx 30rpx;
    p {
      text-align: left;
      line-height: 60rpx;
    }
    .price {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}

.num {
  display: flex;
  text-align: center;
  height: 100rpx;
  line-height:100rpx;
}

.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}

.one{
    display: flex;
    margin-top: 50rpx;
}
.two{
    // margin-bottom: 2rem;
}
.p{
    text-align: center

}
.p1{
    flex: 1
}
.p2{
    flex: 2
}
.p3{
    flex: 3
}
.p4{
    flex: 5
}
.js{
    flex: 6;
    margin-left:30rpx;
    margin-right:30rpx;
    margin-top:10rpx;

}
.xz{
    height:50rpx;
    width:50rpx;
    vertical-align:bottom;
    margin: 0 20rpx;
    margin-top: 100rpx;
}
.xzp1{
    flex: 1;
    width: 1rem;
    height: 1rem;
    align-content: center;
}
.spt{
    width: 120px;
    height: 110px;
}
.fontVVU{
    font-size: 20px;
}
.fontPP{
    font-size: 16px;
}
.fontXQ{
    font-size: 12px;
}
.fontSC{
    font-size: 12px;
    text-align: center;
    margin-right: 20rpx;
}
.sl{
    flex: 1;
    width: 22px;
    height: 18px;
    // background: #C8D3D1;
    text-align: center;
    height: 55rpx;
    line-height: 55rpx;
    
}
.slz{
    flex: 1;
    width: 1rem;
    height: 21px;
    // background: #C8D3D1;
    text-align: center;
    margin-right: 25rpx;
    height: 55rpx;
    line-height: 55rpx;
}
.zt{
    // font-size: 12px;
    // background: #C8D3D1;
    height: 55rpx;
    line-height: 55rpx;
    text-align: center;
    width: 60rpx;
}
.jg{
    flex: 2;
    font-size: 12px;
    // background: #C8D3D1;
    background: #000;
    color: #fff;
    text-align: left;
    height: 55rpx;
    line-height: 55rpx;
    
    /* margin: 0 auto;
    display: block; */
    /* vertical-align:middle; */
    /* border:1px solid; */
}
</style>
